<template>
  <view v-if="!isLoading" class="controller">
    <xy-flower ref="xyFlower" :cur_url="'user'"></xy-flower>
    <view class="user_card" :style="'padding-top:'+$xyfun.xysys().top+'px;'">
      <view class="avatar" @tap="$xyfun.to('/pages/user/info')">
        <image :src="$xyfun.image(userinfo.avatar!==''?userinfo.avatar:common.appConfig.useravatar)"></image>
      </view>
      <view class="info">
        <view class="username">{{userinfo.nickname}}</view>
        <view class="mobile">{{userinfo.mobile}}</view>
      </view>
    </view>
    <view class="user_grade_card">
      <view class="current">
        <view class="cur_grade">我的买卡会员</view>
        <view class="cur_fix" v-if="userinfo.top_card">{{userinfo.top_card.title}}</view>
        <view class="cur_fix" v-else>暂未买卡</view>
      </view>
      <view class="progress">
        <progress activeColor="#000" stroke-width="5" border-radius="5" :percent="pregress_val"></progress>
      </view>
    </view>
    <view class="menu menu_fit just-sb">
      <view class="m_item" v-for="(item,index) in menu_course_order" @tap="onLink(item.url)">
        <image :src="$xyfun.image(item.iconImg)" mode="widthFix" />
        <view class="tit">{{item.title}}</view>
      </view>
    </view>

    <view class="menu_unit distribution" v-if="common.appConfig.distribution_on==1">
      <view class="distribution_level">
        <image :src="$xyfun.image('/static/images/level_icon.png')" />
        <view class="level_title">一级合伙人</view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/withdraw/apply')">
        <view class="tit">可提现</view>
        <view class="detail">
          <text class="num">{{distributionInfo.commission||0.00}}</text>
          <text class="unit">元</text>
        </view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/distribution')">
        <view class="tit">总佣金</view>
        <view class="detail">
          <text class="num">{{distributionInfo.total_commission||0.00}}</text>
          <text class="unit"></text>
        </view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/distribution')">
        <view class="tit">已提现</view>
        <view class="detail">
          <text class="num">{{distributionInfo.withdrawn_commission||0.00}}</text>
          <text class="unit"></text>
        </view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/distribution')">
        <view class="tit">提现中</view>
        <view class="detail">
          <text class="num">{{distributionInfo.withdrawing_commission||0.00}}</text>
          <text class="unit"></text>
        </view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/distribution/order')">
        <view class="tit">我的团队</view>
        <view class="detail">
          <text class="num">{{distributionInfo.two_child_num + distributionInfo.one_child_num}}</text>
          <text class="unit">人</text>
        </view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/distribution/order')">
        <image :src="$xyfun.image('/static/images/user/ddjl.png')"></image>
        <view class="tit">分销订单</view>
      </view>
      <view class="mu_item" @tap="$xyfun.to('/pages/user/distribution/bill')">
        <image :src="$xyfun.image('/static/images/user/jb.png')"></image>
        <view class="tit">佣金明细</view>
      </view>
      <view class="mu_item" @tap="showShareCode()">
        <image :src="$xyfun.image('/static/images/user/yqyl.png')"></image>
        <view class="tit">邀请有礼</view>
      </view>
    </view>

    <view class="menu_unit">
      <view class="mu_item" @tap="onLink('/user/balance')">
        <view class="tit">积分</view>
        <view class="detail">
          <text class="num">{{money}}</text>
          <text class="unit"></text>
        </view>
      </view>
      <view class="mu_item" @tap="onLink('/user/favorite')">
        <view class="yz-iconfont yz-guanzhu-yiguanzhu"></view>
        <view class="tit">收藏课程</view>
      </view>
      <view class="mu_item" @tap="onLink('/user/supplier')" v-if="userinfo.is_supplier==1">
        <view class="yz-iconfont yz-icon-person-renmen" style="color: #ffcfb7;"></view>
        <view class="tit">供应商入口</view>
      </view>
    </view>
    <view class="menu">
      <block v-for="(item,index) in menu">
        <button class="m_item" open-type="contact" v-if="item.url==='services'">
          <image :src="$xyfun.image(item.iconImg)" mode="widthFix" />
          <view class="tit">{{item.title}}</view>
        </button>
        <view class="m_item" @tap="showShare=true" v-else-if="item.url==='share'">
          <image :src="$xyfun.image(item.iconImg)" mode="widthFix" />
          <view class="tit">{{item.title}}</view>
        </view>
        <view class="m_item" @tap="onLink(item.url)" v-else>
          <image :src="$xyfun.image(item.iconImg)" mode="widthFix" />
          <view class="tit">{{item.title}}</view>
        </view>
      </block>
      <view class="m_item" @tap="onLink('/user/take')" v-if="userinfo.is_take==1">
        <image :src="$xyfun.image('/static/images/user/jlzx.png')" mode="widthFix" />
        <view class="tit">自提点</view>
      </view>
    </view>

    <!--分享组件 -->
    <xy-share ref="xyShare" v-model="showShare" posterType="user" />
  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import xyFlower from "@/components/xy-menu/flower.vue";
import xyShare from "@/components/xy-share/index.vue";
export default {
  components: {
    xyShare,
    xyFlower
  },
  data() {
    return {
      isLoading : true,
      showShare:false,
      userinfo : {},
      money: 0,
      pregress_val : 0,

      menu_course_order: [
        {title: '全部订单', url: '/user/order?order_type=0', iconImg: '/static/images/user/dsk.png'},
        {title: '已支付', url: '/user/order?order_type=0&status=1', iconImg: '/static/images/user/dpj.png'},
        {title: '已核销', url: '/user/order?order_type=0&status=2', iconImg: '/static/images/user/ywc.png'},
        {title: '商城订单', url: '/user/order?order_type=1', iconImg: '/static/images/user/unpay.png'},
      ],
      menu: [
        {title: '反馈意见', url: '/user/feedback', iconImg: '/static/images/user/fkyj.png'},
        {title: '常见问题', url: '/article/other?type=question', iconImg: '/static/images/user/cjwt.png'},
        {title: '联系客服', url: 'services', iconImg: '/static/images/user/lxkf.png'},
        {title: '关于我们', url: '/article/other?type=company', iconImg: '/static/images/user/gywm.png'},
      ],

      distributionInfo:{},
    }
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    console.log(this.common)
    var sys = uni.getSystemInfoSync();
  },
  onShow() {
    var that = this;
    //刷新用户信息
    if(this.user.isLogin){
      this.$api.get({
        url : '/user/user_center',
        data : {},
        success: res => {
          that.userinfo = res
          that.money = parseInt(res.money);
          that.isLoading = false;
        }
      })

      this.getDistributionInfo().
      then(res => {
        uni.stopPullDownRefresh();
        if(res.status == 'normal'){
          this.isEmpty = false;
          this.distributionInfo = res.data;
        }else{
          this.$xyfun.msg(res.msg);
        }
      });
    }
  },
  onPullDownRefresh() {
  },
  methods: {
    ...mapActions('user',{'getDistributionInfo':'getDistributionInfo'}),

    async onLink(url){
      this.$xyfun.to('/pages'+url);
    },
    //显示分享二维码
    showShareCode(){
      this.$refs.xyShare.onPoster();
    }
  }
}
</script>

<style>
page{


}
</style>
<style scoped lang="scss">
.controller{
  background: linear-gradient(to bottom,#a9e7fe,#f3f3f3,#f3f3f3);
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}
.user_card{
  display: flex;
  padding: 40rpx;
  padding-top: 116rpx;
  .info{
    margin-top: 10rpx;
    flex-grow: 1;
    margin-left: 20rpx;
    .code{
      font-size: 50rpx;
    }
    .username{
      font-size: 40rpx;
      margin-bottom: 10rpx;
    }
    .mobile{
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }
  }
  .avatar{
    width: 120rpx;
    height: 120rpx;
    image{
      border-radius: calc(120rpx/2);
      width: 120rpx;
      height: 120rpx;
    }
  }
  .root{
    margin-top: 20rpx;
    .yz-iconfont{
      font-size: 50rpx;
    }
  }
}
.user_grade_card{
  padding: 20rpx 36rpx;
  background: #fff;
  margin: 30rpx;
  border-radius: 10rpx;
  .progress{
    overflow: hidden;
    border-radius: 10rpx;
  }
  .current{
    margin-bottom: 34rpx;
    display: flex;
    align-items: center;
    .cur_fix{
      font-size: 20rpx;
    }
    .cur_grade{
      font-size: 26rpx;
      font-weight: 700;
      margin-right: 16rpx;
    }
  }
}
.menu{
  padding: 20rpx 20rpx 20rpx 20rpx;
  display: flex;
  flex-wrap: wrap;
  margin: 30rpx;
  background: #fff;
  border-radius: 10rpx;
  .m_item{
    text-align: center;
    width: 25%;
    margin-top: 22rpx;
    margin-bottom: 22rpx;
    height: unset;
    line-height: unset;
    position: relative;
    .tit{
      font-size: 26rpx;
      margin-top: 4rpx;
    }
    .yz-iconfont{
      transform: scale(0.85);
      display: inline-block;
      width: 80rpx;
      height: 80rpx;
      font-size: 40rpx;
      padding-top: 20rpx;
      box-sizing: border-box;
      border-radius: 40rpx;
      background: #007aff;
      color: #fff;
    }
    image{
      width: 60rpx;
      height: 60rpx;
      display: inline-block;
    }
  }
}
.menu_fit .m_item:nth-of-type(4):before{
  content : '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 20rpx;
  height: 50rpx;
  width: 4rpx;
  background: grey;
}

.menu_unit{
  padding: 20rpx 20rpx 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  margin: 30rpx;
  background: #fff;
  border-radius: 10rpx;
  .mu_item{
    text-align: center;
    width: 25%;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    .detail{
      vertical-align: bottom;
      .unit{
        font-size: 26rpx;
      }
      .num{
        font-size: 40rpx;
        font-weight: bold;
        margin: 0 4rpx;
      }
    }
    .tit{
      font-size: 26rpx;
    }
    image{
      width: 47rpx;
      height: 47rpx;
      margin-bottom: 12rpx;
      display: inline-block;
    }
    .yz-iconfont{
      display: inline-block;
      font-size: 47rpx;
      color: #91d1ff;
      margin-bottom: 12rpx;
    }
  }
}

.distribution{
  position: relative;
  padding-top: 100rpx;
  .distribution_level{
    width: 100%;
    border-bottom: 1rpx solid #ececec;
    position: absolute;
    left: 0;
    top: 16rpx;
    display: flex;
    font-weight: bold;
    image{
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
      margin-top: -40rpx;
    }
  }
}

</style>

